<template>
  <div class="index-buy-container">
    <a :href="item.href" v-for="(item, index) in list" :key="index" :class="{'no-margin-left': index === 0}" target="_blank">
      <img :src="item.src" alt="">
    </a>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: []
    }
  },
  mounted () {
    let arr = [
      { src: require('../../assets/images/index/card01.png'), href: 'https://www.thishop.com/detail/product?goodsId=154' },
      { src: require('../../assets/images/index/card02.png'), href: 'https://www.thishop.com/detail/product?goodsId=1098' },
      { src: require('../../assets/images/index/card03.png'), href: 'https://www.thishop.com/detail/product?goodsId=631' }
    ]
    arr.forEach((item, index) => {
      this.list.push(item)
    })
  }
}
</script>
<style scoped>
.index-buy-container a {
  margin-left: 7px;
}
.index-buy-container a.no-margin-left {
  margin-left: 0;
}
</style>
